import styles from './index.less';
import classNames from 'classnames';
import { CommentModelState, Link, useDispatch, useSelector } from 'umi';
import React, { FC, useEffect, useRef, useState } from 'react';
import { Table, Tooltip, Pagination, message, Divider, Input, Select, Popconfirm, Button, Form, Modal } from 'antd';
import { Icomment } from '@/types';
import { ReloadOutlined } from '@ant-design/icons';
import CommonFooter from '@/components/CommonFooter';

interface Iprops {
    commentData: Icomment[]
}
const commentPage: FC<Iprops> = () => {
    const names: any = useRef<HTMLInputElement>(null)
    const eml: any = useRef<HTMLInputElement>(null)
    const opt: any = useRef<HTMLInputElement>(null)

    const context: any = useRef<HTMLInputElement>(null)


    const [isModalVisible, setIsModalVisible] = useState(false);

    const [items, setItems]: any = useState({});

    const showModal = () => {
        setIsModalVisible(true);
    };

    var content: any = '';

    var ItemData = {}

    const handleOk = () => {
        setIsModalVisible(false);
        content = context.current.input.value;
        ItemData = {
            content: items.content,
            id: items.id,
            createAt: items.createAt,
            email: items.email,
            hostId: items.hostId,
            html: items.html,
            name: items.name,
            parentCommentId: items.parentCommentId,
            pass: items.pass,
            replyUserEmail: items.replyUserEmail,
            replyUserName: items.replyUserName,
            updateAt: items.updateAt,
            url: items.url,
            userAgent: items.userAgent,
        }
        ItemData.content = content
        console.log(ItemData, '11111111');
        dispatch({
            type: 'comment/getCommentContext',
            payload: {
                data: ItemData
            },
        });
        message.success("评论回复成功")
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };

    const dispatch = useDispatch()
    const { CommentList, CommentLength } = useSelector((state: { comment: CommentModelState }) => state.comment)
    console.log(CommentList, CommentLength, '----------');
    useEffect(() => {
        dispatch({
            type: "comment/getComment",
        })
    }, [])
    const columns: any = [
        {
            title: '状态',
            width: 100,
            height: 65,
            dataIndex: 'pass',
            key: 'pass',
            fixed: 'left',
            render: (pass: boolean) => {
                // 渲染是否通过
                return (
                    <span>
                        {pass ? (
                            <span className={styles.green_one}></span>
                        ) : (
                                <span className={styles.red_one}></span>
                            )}
                        {pass ? <span>通过</span> : <span>未通过</span>}
                    </span>
                );
            },
        },
        {
            title: '称呼',
            width: 196,
            height: 65,
            dataIndex: 'name',
            key: 'name',
            fixed: 'left',
        },
        {
            title: '联系方式',
            dataIndex: 'email',
            key: '1',
            height: 65,
            width: 196,
        },
        {
            title: '原始内容',
            dataIndex: 'content',
            key: '2',
            width: 160,
            render: (content: any) => {
                return (
                    <Tooltip title={content} className={styles.tool}>
                        <span style={{ color: '#1890ff' }}>查看内容</span>
                    </Tooltip>
                );
            },
        },
        {
            title: 'HTML内容',
            dataIndex: 'content',
            key: '3',
            width: 160,
            render: (replyUserName: any) => (
                <Tooltip title={replyUserName}>
                    <span style={{ color: '#1890ff' }}>查看内容</span>
                </Tooltip>
            ),
        },
        {
            title: '管理文章',
            dataIndex: 'address',
            key: '4',
            width: 100,
            render: () => (
                <Tooltip title="页面预览">
                    <a style={{ color: '#1890ff' }}>文章</a>
                </Tooltip>
            ),
        },
        {
            title: '创建时间',
            dataIndex: 'createAt',
            key: '5',
            width: 200,
        },
        {
            title: '父级评论',
            dataIndex: 'address',
            key: '6',
            width: 100,
            render: () => <span>无</span>,
        },
        {
            title: '操作',
            key: 'operation',
            fixed: 'right',
            width: 196,
            render: (record: any) => <span>
                <a
                    className={styles.ablue}
                    onClick={() => {
                        const user = JSON.parse(localStorage.getItem("user") as string)
                        if (user.role === "admin") {
                            dispatch({
                                type: 'comment/getCommentPass',
                                payload: {
                                    id: record.id,
                                    pass: true
                                },
                            });
                            dispatch({
                                type: "comment/getComment",
                            })
                            message.success("评论已通过")
                        } else {
                            message.error("用户权限不足")
                        }
                    }}

                >通过</a>
                <Divider type="vertical" />
                <a
                    className={styles.ablue}
                    onClick={() => {
                        const user = JSON.parse(localStorage.getItem("user") as string)
                        if (user.role === "admin") {
                            dispatch({
                                type: 'comment/getCommentBack',
                                payload: {
                                    id: record.id,
                                    pass: false
                                },
                            });
                            dispatch({
                                type: "comment/getComment",
                            })
                            message.success("已拒绝")
                        } else {
                            message.error("用户权限不足")
                        }
                    }}
                >拒绝</a>
                <Divider type="vertical" />
                <a
                    className={styles.ablue}
                    onClick={() => {
                        setIsModalVisible(true);
                        console.log(record);
                        setItems(record)
                    }}

                >回复</a>
                <Divider type="vertical" />
                <Popconfirm
                    title="确认删除这个评论？"
                    onConfirm={() => {
                        console.log(record);
                        const user = JSON.parse(localStorage.getItem("user") as string)
                        if (user.role === "admin") {
                            dispatch({
                                type: "comment/getCommentDelete",
                                payload: {
                                    id: record.id
                                }
                            })
                            message.success("评论已删除")
                        } else {
                            message.error("用户权限不足")
                        }
                    }}
                    okText="确认"
                    cancelText="取消"
                >
                    <a
                        className={styles.ablue}
                    >删除</a>
                </Popconfirm>
            </span>
        },
    ];
    //控制展示隐藏开关
    const [flag, setFlag] = useState<boolean>(false)
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: any) => {
            setFlag(!flag)
            // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: any) => ({
            name: record.name,
        }),
    };
    const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');
    const { Option } = Select;
    function onSearch(val: any) {
        // console.log('search:', val);
    }
    let pass: null = null;
    return (
        <div className={styles.layout_Content}>
            <header>
                <div className={styles.breadcrumb}>
                    <span>
                        <span>
                            <Link to={'/'}>工作台</Link>
                        </span>
                        <span className={styles.breadcrumb_Separator}>/</span>
                    </span>
                    <span>
                        <span>
                            <Link to={'/comment'}>评论管理</Link>
                        </span>
                        <span className={styles.breadcrumb_Separator}>/</span>
                    </span>
                </div>
                <div style={{ margin: '12px 0 0', color: 'red' }}></div>
            </header>
            <main>
                <div className={styles.box}>
                    <Form
                        layout="inline"
                        className={styles.form_controls}
                    >
                        <div className={classNames(styles.ant_row, styles.top)}>
                            <Form.Item label="称呼" name="name" labelCol={{ offset: 5 }}>
                                <Input
                                    style={{ width: '254px', padding: ' 4px 11px' }}
                                    placeholder="请输入发件人"
                                    ref={names}
                                />
                            </Form.Item>
                            <Form.Item label="Email" name="eml" labelCol={{ offset: 5 }}>
                                <Input
                                    style={{ width: '254px', padding: ' 4px 11px' }}
                                    placeholder="请输入收件人"
                                    ref={eml}
                                />
                            </Form.Item>
                            <Form.Item label="状态" name="ops" labelCol={{ offset: 5 }}>
                                <Select
                                    style={{ width: '254px', padding: ' 4px 11px', margin: '0 0 0 15px' }}
                                    className={styles.selects}
                                    showSearch
                                    optionFilterProp="children"
                                    onChange={(selectedRowKeys: React.Key[], selectedRows: any) => {
                                        pass = selectedRows.value
                                        console.log(pass);
                                    }}
                                    onSearch={onSearch}
                                    ref={opt}
                                >
                                    <Option value="1">已通过</Option>
                                    <Option value="0">未通过</Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div className={classNames(styles.ant_row, styles.top)}>
                            <div className={styles.ant_btn}>
                                <Button type="primary" onClick={() => {
                                    let values = names.current.input.value
                                    let emlValues = eml.current.input.value
                                    if (values || emlValues || pass) {
                                        dispatch({
                                            type: 'comment/getCommentSearch',
                                            payload: {
                                                page: 1,
                                                pageSize: 12,
                                                name: values,
                                                email: emlValues,
                                                pass,
                                            },
                                        });
                                    } else {
                                        dispatch({
                                            type: 'comment/getComment',
                                        })
                                    }
                                }}>搜索</Button>
                                <Button style={{ margin: '0 8px' }}
                                    onClick={() => {
                                        names.current.input.value = ''
                                        eml.current.input.value = ''
                                    }}
                                >重置</Button>
                            </div>
                        </div>
                    </Form>
                </div>
                <div className={styles.load}>
                    {
                        !flag ? null : <div className={styles.dis_but}>
                            <button>通过</button>
                            <button>拒绝</button>
                            <button>删除</button>
                        </div>
                    }
                    <div className={styles.bload}>
                        <Tooltip title="刷新">
                            <ReloadOutlined />
                        </Tooltip>
                    </div>
                </div>
                <Table
                    className={styles.table}
                    rowSelection={{
                        type: selectionType,
                        ...rowSelection,
                    }}
                    columns={columns}
                    dataSource={CommentList}
                    scroll={{ x: 1500 }}
                    pagination={{
                        total: CommentLength,
                        showTotal: total => `共${total}条`,
                        showSizeChanger: true,
                        pageSizeOptions: [8, 12, 24, 36],
                        pageSize: 12,
                        defaultCurrent: 1,
                    }}
                />
                <Modal title="回复评论" className={styles.model} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <Input
                        style={{ width: '100%', height: '150px' }}
                        placeholder="支持Markdown"
                        ref={context}
                    />


                </Modal>
            </main>
            <div>
                <CommonFooter></CommonFooter>
            </div>
        </div >
    );
}
export default commentPage;
